<template>
  <view class="template-avatar tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot='back' class='tn-custom-nav-bar__back' @click='goBack'>
        <text class='icon tn-icon-left'></text>
      </view>
      <view slot="content" class="tn-text-center">
        <text class="tn-text-bold">头像设置</text>
      </view>
    </tn-nav-bar>
    
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}" class="container">
      <!-- 头像预览区域 -->
      <view class="preview-section">
        <view class="preview-title">我的头像</view>
        <view class="avatar-preview tn-flex tn-flex-col-center tn-flex-row-center">
          <view class="avatar-container round">
            <image v-if="avatarUrl" :src="avatarUrl" class="avatar-image" mode="aspectFill"></image>
            <view v-else class="default-avatar">
              <view class="default-icon tn-icon-user"></view>
            </view>
            <view class="avatar-frame"></view>
          </view>
        </view>
        <view class="avatar-status tn-text-center">
          <text v-if="avatarUrl" class="status-text">头像已设置</text>
          <text v-else class="status-text">未设置头像</text>
        </view>
      </view>
      
      <!-- 操作区域 -->
      <view class="operation-section">
        <view class="operation-title">设置新头像</view>
        
        <view class="action-buttons tn-flex tn-flex-col-center tn-flex-row-center">
          <view class="btn btn-primary" @tap="chooseImage">
            <view class="btn-icon tn-icon-image"></view>
            <text>选择图片</text>
          </view>
          <view class="btn btn-secondary" @tap="takePhoto">
            <view class="btn-icon tn-icon-camera"></view>
            <text>拍摄照片</text>
          </view>
        </view>
      </view>
      
      <!-- 使用说明 -->
     
    </view>
    
    <!-- 保存按钮 -->
    <view class="save-section" v-if="avatarUrl">
      <view class="btn btn-save" @tap="saveAvatar">
        <text>保存头像</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'TemplateAvatar',
    data() {
      return {
        avatarUrl: ''
      }
    },
    methods: {
      goBack() {
        uni.navigateBack();
      },
      // 选择图片
      chooseImage() {
        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['album'],
          success: (res) => {
            this.avatarUrl = res.tempFilePaths[0]
            uni.showToast({
              title: '头像已更新',
              icon: 'success'
            })
          }
        })
      },
      // 拍摄照片
      takePhoto() {
        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['camera'],
          success: (res) => {
            this.avatarUrl = res.tempFilePaths[0]
            uni.showToast({
              title: '头像已更新',
              icon: 'success'
            })
          }
        })
      },
      // 设置默认头像
      setDefaultAvatar(type) {
        // 这里使用颜色块代替默认头像
        // 实际项目中可以替换为真实的头像URL
        const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4']
        this.avatarUrl = '' // 清空URL，显示默认头像样式
        uni.showToast({
          title: '已使用默认头像',
          icon: 'success'
        })
      },
      // 保存头像
      saveAvatar() {
        uni.showToast({
          title: '头像保存成功',
          icon: 'success',
          duration: 2000
        })
        // 实际项目中这里应该调用保存头像的API
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }
    }
  }
</script>

<style lang="scss" scoped>
.template-avatar {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  .container {
    padding: 30rpx;
  }
  
  .preview-section {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 30rpx;
    padding: 60rpx 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 15rpx 40rpx rgba(0, 0, 0, 0.15);
    
    .preview-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #fff;
      margin-bottom: 50rpx;
      text-align: center;
    }
    
    .avatar-preview {
      .avatar-container {
        width: 320rpx;
        height: 320rpx;
        position: relative;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
        
        .avatar-image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
        
        .default-avatar {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(255, 255, 255, 0.3);
          
          .default-icon {
            font-size: 120rpx;
            color: rgba(255, 255, 255, 0.7);
          }
        }
        
        .avatar-frame {
          position: absolute;
          top: -10rpx;
          left: -10rpx;
          right: -10rpx;
          bottom: -10rpx;
          border-radius: 50%;
          border: 4rpx solid rgba(255, 255, 255, 0.5);
          pointer-events: none;
        }
      }
    }
    
    .avatar-status {
      margin-top: 40rpx;
      
      .status-text {
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
  
  .operation-section {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 30rpx;
    padding: 50rpx 40rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 15rpx 40rpx rgba(0, 0, 0, 0.15);
    
    .operation-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
      margin-bottom: 40rpx;
      text-align: center;
    }
    
    .action-buttons {
      margin-bottom: 50rpx;
      
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24rpx 40rpx;
        border-radius: 50rpx;
        font-size: 30rpx;
        font-weight: 500;
        margin: 0 20rpx;
        transition: all 0.3s;
        
        .btn-icon {
          margin-right: 15rpx;
          font-size: 34rpx;
        }
        
        &:active {
          transform: scale(0.95);
        }
      }
      
      .btn-primary {
        background: rgba(255, 255, 255, 0.9);
        color: #667eea;
        box-shadow: 0 8rpx 25rpx rgba(255, 255, 255, 0.3);
        
        &:active {
          box-shadow: 0 4rpx 15rpx rgba(255, 255, 255, 0.3);
        }
      }
      
      .btn-secondary {
        background: transparent;
        color: #fff;
        border: 2rpx solid rgba(255, 255, 255, 0.7);
        
        &:active {
          background: rgba(255, 255, 255, 0.1);
        }
      }
    }
    
    .quick-actions {
      .quick-action {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .action-avatar {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          margin-bottom: 15rpx;
          box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.15);
          transition: all 0.3s;
          
          &.default-1 {
            background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
          }
          
          &.default-2 {
            background: linear-gradient(135deg, #4ECDC4, #6EE7D9);
          }
          
          &.default-3 {
            background: linear-gradient(135deg, #45B7D1, #6BC5E8);
          }
          
          &.default-4 {
            background: linear-gradient(135deg, #96CEB4, #B8E0C7);
          }
          
          &:active {
            transform: scale(0.9);
          }
        }
        
        .action-text {
          font-size: 24rpx;
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }
  
  .tips-section {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 30rpx;
    padding: 40rpx 30rpx;
    box-shadow: 0 15rpx 40rpx rgba(0, 0, 0, 0.15);
    
    .tips-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
      margin-bottom: 30rpx;
      text-align: center;
    }
    
    .tips-list {
      .tip-item {
        margin-bottom: 25rpx;
        
        .tip-icon {
          color: rgba(255, 255, 255, 0.8);
          font-size: 28rpx;
          margin-right: 20rpx;
        }
        
        .tip-text {
          font-size: 26rpx;
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }
  
  .save-section {
    position: fixed;
    bottom: 60rpx;
    left: 30rpx;
    right: 30rpx;
    
    .btn-save {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 28rpx;
      border-radius: 50rpx;
      font-size: 32rpx;
      font-weight: 600;
      background: rgba(255, 255, 255, 0.9);
      color: #667eea;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
      transition: all 0.3s;
      
      &:active {
        transform: scale(0.98);
        box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.2);
      }
    }
  }
}

.tn-custom-nav-bar__back {
  width: 60%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;
  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }
}
</style>